import {KeywordModel} from '../../models/keyword.js'
import {BookModel} from '../../models/book.js'
import {paginationBev} from '../behaviors/pagination.js'

const keywordModel = new KeywordModel()
const bookModel = new BookModel()

Component({
    // 组件使用行为
    behaviors: [paginationBev],

    /**
     * 组件的属性列表
     */
    properties: {
        more: {
            type: String,
            // 值有改变，就会触发loadMore方法
            observer: 'loadMore'
        }
    },

    /**
     * 组件的初始数据
     */
    data: {
        // 历史搜索
        historyWords:[],
        // 热门搜索
        hotWords: [],
        searching: false,
        // 输入框的值
        q: '',
        // 按钮锁
        loading: false,
        // 页面一进入的加载
        loadingCenter: false
    },

    /**
     * 在组件实例进入页面节点树时执行
     */
    attached () {
        // 获取历史搜索
        this.setData({
            historyWords: keywordModel.getHistory()
        })

        // 热门搜索
        keywordModel.getHot().then(res => {
            this.setData({
                hotWords: res.hot
            })
        })
    },

    /**
     * 组件的方法列表
     */
    methods: {
        // 通知父级组件
        onCancel(event) {
            // 清空数据
            this.initPagination()

            this.triggerEvent('cancel', {}, {})
        },
        // 点击打叉按钮
        onDelete (event) {
            // 清空数据
            this.initPagination()

            this._closeResult()
        },
        // 输入框点击确定
        onConfirm (event) {
            this._showResult()

            // 显示加载框
            this._showLoadingCenter()

            // 搜索
            const q = event.detail.value || event.detail.text
            this.setData({
                q
            })
            // 0代表从第一条开始查询
            bookModel.search(0, q).then(res => {
                // 获取下一页数据(两个数组合并)
                this.setMoreData(res.books)
                // 设置共几条
                this.setTotal(res.total)

                // 添加缓存
                keywordModel.addToHistory(q)

                // 隐藏加载框
                this._hideLoadingCenter()
            })
        },
        // 加载更多
        loadMore() {
            if (!this.data.q) {
                return
            }

            // 按钮锁（避免重复数据）
            if (this.isLocked()) {
                return
            }

            if (this.hasMore()) {
                // wxml不需要去改变，这样写是可以的；如果wxml有绑定这个变量，那么要用setData
                // 加锁
                this.locked()

                // 获取下一页数据
                bookModel.search(this.getCurrentStart(), this.data.q).then(res => {
                    // 获取下一页数据
                    this.setMoreData(res.books)

                    // 解锁
                    this.unLocked()
                }, () => {
                    // 解锁(请求失败：例如断网)
                    this.unLocked()
                })
            }
        },
        // 加载框显示跟隐藏
        _showLoadingCenter() {
            this.setData({
                loadingCenter: true
            })
        },
        _hideLoadingCenter() {
            this.setData({
                loadingCenter: false
            })
        },
        // 设置是否显示列表
        _showResult() {
            this.setData({
                searching: true
            })
        },
        _closeResult() {
            this.setData({
                searching: false,
                q: ''
            })
        }
    }
})
